<template>
  <div class="app-main">
    <div class="section-main clearfix">
      <div class="title">
        <img src="../../../assets/img/jiandang/title.png" alt="" class="img-fenche">
      </div>
      <p class="content" v-text="content"></p>
    </div>
    <div class="cutimg">
        <div class="img-div">
          <img :src="imgUrl" alt="">
        </div>
      </div>
      <div class="section-bottom">
          <div class="show-div" @click="suremake">
            <btn-router
              :background='require("../../../assets/img/jiandang/btn1.png")'
              :width=261
              :height=42
              size='14'
            >生成贺卡</btn-router>
          </div>
          <div class="back-div" @click="goback" >
            <btn-router
              :background='require("../../../assets/img/jiandang/btn1.png")'
              :width=261
              :height=42
              size='14'
            >返回上级</btn-router>
          </div>
    </div>
  </div>
</template>

<script>
import btnRouter from '@/components/routerButton'// 跳转按钮组件
import { mapState } from 'vuex'

console.log(mapState)
export default {
  name: 'Show',
  data () {
    return {
    }
  },
  computed: {
    ...mapState({
      imgUrl: state => state.file.imgUrl,
      content: state => state.file.content
    })
  },
  components: {
    btnRouter
  },
  methods: {

    goback () {
      this.$router.go(-1)
    },
    suremake () {
      if (this.imgUrl) {
        var imgfile = this.convertBase64UrlToBlob(this.imgUrl)
        console.log(imgfile)
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .app-main{background:url(../../../assets/img/jiandang/background.png) no-repeat top left;background-size:100% 100%}
  .app-main::before{position:absolute;top:2.65rem;right:0;width:1.17rem;height:2.56rem;background:url(../../../assets/img/jiandang/stone.png) no-repeat top left;background-size:contain;content:''}
  .section-main{position:relative;top:2.5rem;left:1.6rem;max-width:2.7rem;height:5.2rem}
  .content{width:2rem;overflow: hidden;float:right;padding:.1rem;font-size:14px;writing-mode:vertical-rl;writing-mode:tb-rl;word-break:break-all}
  .title{float:right;overflow:hidden;margin:0 .1rem;width:.5rem}
  .title img{width:100%}
  .cutimg{position:absolute;right:0.1rem;bottom:3.3rem;padding:10%;width:4.3rem;height:2.56rem;background:url(../../../assets/img/jiandang/photo.png) no-repeat top left;background-size:contain}
  .img-div{margin:0 auto;width:1.8rem;height:1.8rem}
  .cutimg img{width:100%}
  .section-bottom{position:absolute;bottom:0;width:100%}
  .section-bottom img{position:absolute;bottom:0;width:100%}
  .show-div{position:relative;bottom:.2rem;left:1rem;display:inline-block}
  .back-div{position:relative;right:1rem;bottom:.2rem;float:right;display:block}
</style>
